<template>
  <div class="form-designer-container">
    <!-- 主界面只显示一个按钮 -->
    <div class="designer-button-container">
      <button class="btn btn-primary designer-toggle-btn" @click="showDesignerModal = true">
        <svg class="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
          <line x1="3" y1="9" x2="21" y2="9"></line>
          <line x1="9" y1="21" x2="9" y2="9"></line>
        </svg>
        打开表单设计器
      </button>
    </div>


    <!-- 预览模态框 -->
    <div v-if="showPreview" class="modal" @click="closePreview">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>表单预览</h3>
          <button class="modal-close" @click="closePreview">×</button>
        </div>
        <div class="modal-body">
          <div class="preview-form">
            <div v-for="component in formComponents" :key="component.id" class="preview-form-component">
              <div class="component-label">{{ component.label || component.name }}</div>
              <div class="component-preview">
                <div v-if="component.type === 'input'">
                  <input type="text" :placeholder="component.placeholder || '请输入...'" class="preview-input">
                </div>
                <div v-else-if="component.type === 'textarea'">
                  <textarea :placeholder="component.placeholder || '请输入...'" class="preview-textarea"></textarea>
                </div>
                <div v-else-if="component.type === 'checkbox'">
                  <div class="checkbox-group">
                    <label v-for="option in component.options" :key="option.value">
                      <input type="checkbox">
                      <span>{{ option.label }}</span>
                    </label>
                  </div>
                </div>
                <div v-else-if="component.type === 'radio'">
                  <div class="radio-group">
                    <label v-for="option in component.options" :key="option.value">
                      <input type="radio" name="radio-preview-{{component.id}}">
                      <span>{{ option.label }}</span>
                    </label>
                  </div>
                </div>
                <div v-else-if="component.type === 'select'">
                  <select class="preview-select">
                    <option value="">{{ component.placeholder || '请选择...' }}</option>
                    <option v-for="option in component.options" :key="option.value" :value="option.value">{{ option.label }}</option>
                  </select>
                </div>
                <div v-else-if="component.type === 'date'">
                  <input type="date" :placeholder="component.placeholder || '选择日期'" :value="component.dateValue" class="preview-date">
                </div>
                <div v-else-if="component.type === 'datetime'">
                  <input type="datetime-local" :placeholder="component.placeholder || '选择日期时间'" :value="component.dateTimeValue" class="preview-datetime">
                </div>
                <div v-else-if="component.type === 'array'">
                  <div class="array-container">
                    <div class="array-header">
                      <span>{{ component.label || '数据容器' }}</span>
                      <span class="array-count">({{ component.items?.length || 0 }}个子组件)</span>
                    </div>
                    <div class="array-items">
                      <div v-if="component.items && component.items.length > 0">
                        <div v-for="item in component.items" :key="item.id" class="array-item">
                          <div class="array-item-label">子组件: {{ item.label }}</div>
                          <div v-if="item.type === 'input'">
                            <input type="text" :placeholder="item.placeholder || '请输入...'" class="preview-input">
                          </div>
                          <div v-else-if="item.type === 'textarea'">
                            <textarea :placeholder="item.placeholder || '请输入...'" class="preview-textarea"></textarea>
                          </div>
                          <div v-else-if="item.type === 'checkbox'">
                            <div class="checkbox-group">
                              <label v-for="option in item.options" :key="option.value">
                                <input type="checkbox">
                                <span>{{ option.label }}</span>
                              </label>
                            </div>
                          </div>
                          <div v-else-if="item.type === 'radio'">
                            <div class="radio-group">
                              <label v-for="option in item.options" :key="option.value">
                                <input type="radio" name="radio-preview-{{item.id}}">
                                <span>{{ option.label }}</span>
                              </label>
                            </div>
                          </div>
                          <div v-else-if="item.type === 'select'">
                            <select class="preview-select">
                              <option value="">{{ item.placeholder || '请选择...' }}</option>
                              <option v-for="option in item.options" :key="option.value" :value="option.value">{{ option.label }}</option>
                            </select>
                          </div>
                          <div v-else-if="item.type === 'date'">
                            <input type="date" :placeholder="item.placeholder || '选择日期'" :value="item.dateValue" class="preview-date">
                          </div>
                          <div v-else-if="item.type === 'datetime'">
                            <input type="datetime-local" :placeholder="item.placeholder || '选择日期时间'" :value="item.dateTimeValue" class="preview-datetime">
                          </div>
                          <div v-else-if="item.type === 'divider'">
                            <div class="divider"></div>
                            <div v-if="item.label" class="divider-label">{{ item.label }}</div>
                          </div>
                          <div v-else>
                            {{ item.name }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-else-if="component.type === 'divider'">
                  <div class="divider"></div>
                  <div v-if="component.label" class="divider-label">{{ component.label }}</div>
                </div>
                <div v-else>
                  {{ component.name }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" @click="handlePreviewSubmit">提交</button>
            <button class="btn btn-default" @click="closePreview">关闭</button>
          </div>
      </div>
    </div>

    <!-- JSON查看模态框 -->
    <div v-if="showJsonModal" class="modal" @click="closeJsonModal">
      <div class="modal-content json-modal" @click.stop>
        <div class="modal-header">
          <h3>表单JSON</h3>
          <button class="modal-close" @click="closeJsonModal">×</button>
        </div>
        <div class="modal-body">
          <pre class="json-preview">{{ formattedJson }}</pre>
        </div>
        <div class="modal-footer">
          <button class="btn btn-default" @click="copyJson">复制</button>
          <button class="btn btn-primary" @click="closeJsonModal">关闭</button>
        </div>
      </div>
    </div>
    <!-- 表单设计器模态框 -->
    <div v-if="showDesignerModal" class="modal" @click="showDesignerModal = false">
      <div class="modal-content designer-modal" @click.stop>
        <div class="modal-header">
          <h3>表单设计器</h3>
          <button class="modal-close" @click="showDesignerModal = false">×</button>
        </div>
        <div class="modal-body">
          <!-- 原始表单设计器内容 -->
          <!-- 顶部操作栏 -->
          <div class="designer-header">
            <div class="title-container">
              <h1 class="page-title">表单设计器</h1>
            </div>
            <div class="action-buttons">
              <button class="btn btn-default" @click="previewForm">
                <svg class="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
                </svg>
                预览
              </button>
              <button class="btn btn-default" @click="showJson">
                <svg class="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <polyline points="16 18 22 12 16 6"></polyline>
                  <polyline points="8 6 2 12 8 18"></polyline>
                </svg>
                查看JSON
              </button>
              <button class="btn btn-primary" @click="saveForm">
                <svg class="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
                  <polyline points="17 21 17 13 7 13 7 21"></polyline>
                  <polyline points="7 3 7 8 15 8"></polyline>
                </svg>
                保存
              </button>
            </div>
          </div>

          <!-- 主要内容区域 -->
          <div class="designer-content">
            <!-- 左侧组件库 -->
            <div class="components-panel">
              <h3 class="panel-title">组件库</h3>
              
              <!-- 基础组件 -->
              <div class="component-category">
                <div class="category-header" @click="toggleCategory('basic')">
                  <span class="category-name">基础组件</span>
                  <svg class="icon" :class="{ 'rotate': expandedCategories.basic }" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="6 9 12 15 18 9"></polyline>
                  </svg>
                </div>
                <div class="category-content" v-if="expandedCategories.basic">
                  <div class="component-item" v-for="component in basicComponents" :key="component.id" draggable="true" @dragstart="onDragStart(component)">
                    <span class="component-icon">{{ component.icon }}</span>
                    <span class="component-name">{{ component.name }}</span>
                  </div>
                </div>
              </div>

              <!-- 选择组件 -->
              <div class="component-category">
                <div class="category-header" @click="toggleCategory('select')">
                  <span class="category-name">选择组件</span>
                  <svg class="icon" :class="{ 'rotate': expandedCategories.select }" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="6 9 12 15 18 9"></polyline>
                  </svg>
                </div>
                <div class="category-content" v-if="expandedCategories.select">
                  <div class="component-item" v-for="component in selectComponents" :key="component.id" draggable="true" @dragstart="onDragStart(component)">
                    <span class="component-icon">{{ component.icon }}</span>
                    <span class="component-name">{{ component.name }}</span>
                  </div>
                </div>
              </div>

              <!-- 日期时间组件 -->
              <div class="component-category">
                <div class="category-header" @click="toggleCategory('date')">
                  <span class="category-name">日期时间</span>
                  <svg class="icon" :class="{ 'rotate': expandedCategories.date }" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="6 9 12 15 18 9"></polyline>
                  </svg>
                </div>
                <div class="category-content" v-if="expandedCategories.date">
                  <div class="component-item" v-for="component in dateComponents" :key="component.id" draggable="true" @dragstart="onDragStart(component)">
                    <span class="component-icon">{{ component.icon }}</span>
                    <span class="component-name">{{ component.name }}</span>
                  </div>
                </div>
              </div>

              <!-- 高级组件 -->
              <div class="component-category">
                <div class="category-header" @click="toggleCategory('advanced')">
                  <span class="category-name">高级组件</span>
                  <svg class="icon" :class="{ 'rotate': expandedCategories.advanced }" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="6 9 12 15 18 9"></polyline>
                  </svg>
                </div>
                <div class="category-content" v-if="expandedCategories.advanced">
                  <div class="component-item" v-for="component in advancedComponents" :key="component.id" draggable="true" @dragstart="onDragStart(component)">
                    <span class="component-icon">{{ component.icon }}</span>
                    <span class="component-name">{{ component.name }}</span>
                  </div>
                </div>
              </div>
            </div>

            <!-- 中间设计区域 -->
            <div class="design-area" @dragover="onDragOver" @drop="onDrop">
              <div class="form-container" :class="{ 'empty': formComponents.length === 0 }">
                <template v-if="formComponents.length > 0">
                  <div class="form-component" v-for="(component, index) in formComponents" :key="component.id" 
                       @click.stop="selectComponent(component.id)" :class="{ 'selected': selectedComponentId === component.id }">
                    <!-- 组件内容 -->
                    <div class="component-content">
                      <div class="component-label">{{ component.label || component.name }}</div>
                      <div class="component-preview">
                        <div v-if="component.type === 'input'">
                          <input type="text" :placeholder="component.placeholder || '请输入...'" readonly class="preview-input">
                        </div>
                        <div v-else-if="component.type === 'textarea'">
                          <textarea :placeholder="component.placeholder || '请输入...'" readonly class="preview-textarea"></textarea>
                        </div>
                        <div v-else-if="component.type === 'checkbox'">
                          <div class="checkbox-group">
                            <label v-for="option in component.options" :key="option.value">
                              <input type="checkbox" disabled>
                              <span>{{ option.label }}</span>
                            </label>
                          </div>
                        </div>
                        <div v-else-if="component.type === 'radio'">
                          <div class="radio-group">
                            <label v-for="option in component.options" :key="option.value">
                              <input type="radio" name="radio-preview" disabled>
                              <span>{{ option.label }}</span>
                            </label>
                          </div>
                        </div>
                        <div v-else-if="component.type === 'select'">
                          <select disabled class="preview-select">
                            <option value="">{{ component.placeholder || '请选择...' }}</option>
                            <option v-for="option in component.options" :key="option.value" :value="option.value">{{ option.label }}</option>
                          </select>
                        </div>
                        <div v-else-if="component.type === 'date'">
                          <input type="date" :placeholder="component.placeholder || '选择日期'" :value="component.dateValue" readonly class="preview-date">
                        </div>
                        <div v-else-if="component.type === 'datetime'">
                          <input type="datetime-local" :placeholder="component.placeholder || '选择日期时间'" :value="component.dateTimeValue" readonly class="preview-datetime">
                        </div>
                        <div v-else-if="component.type === 'array'">
                          <div class="array-container" @dragover="onArrayDragOver($event, component.id)" @drop="onArrayDrop($event, component.id)">
                            <div class="array-header">
                              <span>{{ component.label || '数据容器' }}</span>
                              <span class="array-count">({{ component.items?.length || 0 }}个子组件)</span>
                            </div>
                            <div class="array-items">
                              <div v-if="component.items && component.items.length > 0">
                                <div v-for="item in component.items" :key="item.id" class="array-item">
                                  <div class="array-item-label">子组件: {{ item.label }}</div>
                                  <div v-if="item.type === 'input'">
                                    <input type="text" :placeholder="item.placeholder || '请输入...'" readonly class="preview-input">
                                  </div>
                                  <div v-else-if="item.type === 'textarea'">
                                    <textarea :placeholder="item.placeholder || '请输入...'" readonly class="preview-textarea"></textarea>
                                  </div>
                                  <div v-else-if="item.type === 'checkbox'">
                                    <div class="checkbox-group">
                                      <label v-for="option in item.options" :key="option.value">
                                        <input type="checkbox" disabled>
                                        <span>{{ option.label }}</span>
                                      </label>
                                    </div>
                                  </div>
                                  <div v-else-if="item.type === 'radio'">
                                    <div class="radio-group">
                                      <label v-for="option in item.options" :key="option.value">
                                        <input type="radio" name="radio-preview-{{item.id}}" disabled>
                                        <span>{{ option.label }}</span>
                                      </label>
                                    </div>
                                  </div>
                                  <div v-else-if="item.type === 'select'">
                                    <select disabled class="preview-select">
                                      <option value="">{{ item.placeholder || '请选择...' }}</option>
                                      <option v-for="option in item.options" :key="option.value" :value="option.value">{{ option.label }}</option>
                                    </select>
                                  </div>
                                  <div v-else-if="item.type === 'date'">
                                    <input type="date" :placeholder="item.placeholder || '选择日期'" :value="item.dateValue" readonly class="preview-date">
                                  </div>
                                  <div v-else-if="item.type === 'datetime'">
                                    <input type="datetime-local" :placeholder="item.placeholder || '选择日期时间'" :value="item.dateTimeValue" readonly class="preview-datetime">
                                  </div>
                                  <div v-else-if="item.type === 'divider'">
                                    <div class="divider"></div>
                                    <div v-if="item.label" class="divider-label">{{ item.label }}</div>
                                  </div>
                                  <div v-else>
                                    {{ item.name }}
                                  </div>
                                </div>
                              </div>
                              <div v-else class="empty-array">
                                拖拽组件到此处添加子组件
                              </div>
                            </div>
                          </div>
                        </div>
                        <div v-else-if="component.type === 'divider'">
                          <div class="divider"></div>
                          <div v-if="component.label" class="divider-label">{{ component.label }}</div>
                        </div>
                        <div v-else>
                          {{ component.name }}
                        </div>
                      </div>
                    </div>
                    
                    <!-- 组件操作按钮 -->
                    <div class="component-actions">
                      <button class="action-btn move-up-btn" title="上移" @click.stop="moveComponentUp(index)" :disabled="index === 0">
                        <svg class="icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                          <polyline points="18 15 12 9 6 15"></polyline>
                        </svg>
                      </button>
                      <button class="action-btn move-down-btn" title="下移" @click.stop="moveComponentDown(index)" :disabled="index === formComponents.length - 1">
                        <svg class="icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                          <polyline points="6 9 12 15 18 9"></polyline>
                        </svg>
                      </button>
                      <button class="action-btn copy-btn" title="复制" @click.stop="copyComponent(index)">
                        <svg class="icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                          <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                        </svg>
                      </button>
                      <button class="action-btn delete-btn" title="删除" @click.stop="deleteComponent(index)">
                        <svg class="icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                          <polyline points="3 6 5 6 21 6"></polyline>
                          <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                          <line x1="10" y1="11" x2="10" y2="17"></line>
                          <line x1="14" y1="11" x2="14" y2="17"></line>
                        </svg>
                      </button>
                    </div>
                  </div>
                </template>
                <div v-else class="empty-form">
                  <div class="empty-icon">📝</div>
                  <div class="empty-text">从左侧组件库拖拽组件到此处开始设计表单</div>
                </div>
              </div>
            </div>

            <!-- 右侧属性配置面板 -->
            <div class="properties-panel">
              <h3 class="panel-title">属性配置</h3>
              <div v-if="selectedComponent">
                <div class="property-section">
                    <h4 class="section-title">字段属性</h4>
                    <div class="property-item">
                      <label class="property-label">标签名称</label>
                      <input type="text" v-model="selectedComponent.label" class="property-input">
                    </div>
                    <div class="property-item">
                      <label class="property-label">字段名称</label>
                      <input type="text" v-model="selectedComponent.name" class="property-input">
                    </div>
                    <template v-if="!['date', 'datetime'].includes(selectedComponent.type)">
                      <div class="property-item">
                        <label class="property-label">占位符</label>
                        <input type="text" v-model="selectedComponent.placeholder" class="property-input">
                      </div>
                    </template>
                    <template v-if="selectedComponent.type !== 'divider'">
                      <div class="property-item">
                        <label class="property-label">默认值</label>
                        <input type="text" v-model="selectedComponent.defaultValue" class="property-input">
                      </div>
                    </template>
                  </div>

                <!-- 根据组件类型显示不同的属性 -->
                <div v-if="selectedComponent.type === 'array'" class="property-section">
                  <h4 class="section-title">子组件配置</h4>
                  <div class="array-children">
                    <div v-if="selectedComponent.items && selectedComponent.items.length > 0">
                      <div v-for="(item, idx) in selectedComponent.items" :key="item.id" class="array-child-item">
                        <div class="array-child-header">
                          <button class="edit-child-btn" @click.stop="editArrayChild(idx)" title="编辑子组件">
                            ✏️
                          </button>
                          <span>{{ item.label || item.name }}</span>
                          <button class="remove-child-btn" @click.stop="removeArrayChild(idx)">×</button>
                        </div>
                        <div v-if="editingChildIndex === idx" class="array-child-properties">
                          <h4 class="section-title">字段属性</h4>
                          <div class="property-item">
                            <label class="property-label">标签名</label>
                            <input type="text" v-model="selectedComponent.items[idx].label" class="property-input small-input">
                          </div>
                          <div class="property-item">
                            <label class="property-label">字段名</label>
                            <input type="text" v-model="selectedComponent.items[idx].name" class="property-input small-input">
                          </div>
                          <template v-if="!['date', 'datetime'].includes(selectedComponent.items[idx].type)">
                            <div class="property-item">
                              <label class="property-label">占位符</label>
                              <input type="text" v-model="selectedComponent.items[idx].placeholder" class="property-input small-input">
                            </div>
                          </template>
                          <template v-if="selectedComponent.items[idx].type !== 'divider'">
                            <div class="property-item">
                              <label class="property-label">默认值</label>
                              <input type="text" v-model="selectedComponent.items[idx].defaultValue" class="property-input small-input">
                            </div>
                          </template>

                          <!-- 根据子组件类型显示不同的属性 -->
                          <div v-if="['select', 'checkbox', 'radio'].includes(selectedComponent.items[idx].type)" class="property-section">
                            <h4 class="section-title">选项配置</h4>
                            <div v-if="selectedComponent.items[idx].options && selectedComponent.items[idx].options.length > 0">
                              <div v-for="(option, optIdx) in selectedComponent.items[idx].options" :key="option.value" class="option-item">
                                <input type="text" v-model="option.label" placeholder="选项文本" class="option-input small-input">
                                <input type="text" v-model="option.value" placeholder="选项值" class="option-input small-input">
                                <button class="remove-option-btn" @click.stop="removeChildOption(idx, optIdx)">×</button>
                              </div>
                            </div>
                            <button class="add-option-btn small-btn" @click.stop="addChildOption(idx)">添加选项</button>
                          </div>
                          
                          
                          <div v-if="selectedComponent.items[idx].type === 'date'" class="property-section">
                            <h4 class="section-title">日期配置</h4>
                            <div class="property-item">
                              <label class="property-label">默认日期</label>
                              <input type="date" v-model="selectedComponent.items[idx].dateValue" class="property-input small-input">
                            </div>
                          </div>
                          
                          <div v-if="selectedComponent.items[idx].type === 'datetime'" class="property-section">
                            <h4 class="section-title">日期时间配置</h4>
                            <div class="property-item">
                              <label class="property-label">默认日期时间</label>
                              <input type="datetime-local" v-model="selectedComponent.items[idx].dateTimeValue" class="property-input small-input">
                            </div>
                          </div>

                          <div class="property-section">
                            <h4 class="section-title">样式设置</h4>
                            <div class="property-item">
                              <label class="property-label">宽度</label>
                              <input type="text" v-model="selectedComponent.items[idx].width" class="property-input small-input">
                            </div>
                          </div>

                          <div class="property-section">
                            <h4 class="section-title">验证规则</h4>
                            <div class="property-item checkbox-item">
                              <label class="checkbox-label">
                                <input type="checkbox" v-model="selectedComponent.items[idx].required">
                                必填项
                              </label>
                            </div>
                          </div>

                          <button class="save-child-btn" @click.stop="editingChildIndex = null">保存</button>
                        </div>
                      </div>
                    </div>
                    <button class="add-child-btn" @click.stop="addArrayChild">添加子组件</button>
                  </div>
                </div>

                <div v-if="['select', 'checkbox', 'radio'].includes(selectedComponent.type)" class="property-section">
                  <h4 class="section-title">选项配置</h4>
                  <div v-if="selectedComponent.options && selectedComponent.options.length > 0">
                    <div v-for="(option, idx) in selectedComponent.options" :key="option.value" class="option-item">
                      <input type="text" v-model="option.label" placeholder="选项文本" class="option-input">
                      <input type="text" v-model="option.value" placeholder="选项值" class="option-input">
                      <button class="remove-option-btn" @click.stop="removeOption(idx)">×</button>
                    </div>
                  </div>
                  <button class="add-option-btn" @click.stop="addOption">添加选项</button>
                </div>
                
                <!-- 日期和时间组件配置 -->
                <div v-if="selectedComponent.type === 'date'" class="property-section">
                  <h4 class="section-title">日期配置</h4>
                  <div class="property-item">
                    <label class="property-label">日期时间</label>
                    <input type="date" v-model="selectedComponent.dateValue" class="property-input">
                  </div>
                </div>
                
                <div v-if="selectedComponent.type === 'datetime'" class="property-section">
                  <h4 class="section-title">日期时间配置</h4>
                  <div class="property-item">
                    <label class="property-label">日期时间</label>
                    <input type="datetime-local" v-model="selectedComponent.dateTimeValue" class="property-input">
                  </div>
                </div>

                <div class="property-section">
                  <h4 class="section-title">样式设置</h4>
                  <div class="property-item">
                    <label class="property-label">宽度</label>
                    <input type="text" v-model="selectedComponent.width" class="property-input">
                  </div>
                </div>

                <div class="property-section">
                  <h4 class="section-title">验证规则</h4>
                  <div class="property-item checkbox-item">
                    <label class="checkbox-label">
                      <input type="checkbox" v-model="selectedComponent.required">
                      必填项
                    </label>
                  </div>
                </div>
              </div>
              <div v-else class="no-selection">
                <p>请选择一个组件进行编辑</p>
              </div>
            </div>
          </div>

          <!-- 预览模态框 -->
          <div v-if="showPreview" class="modal" @click="closePreview">
            <div class="modal-content" @click.stop>
              <div class="modal-header">
                <h3>表单预览</h3>
                <button class="modal-close" @click="closePreview">×</button>
              </div>
              <div class="modal-body">
                <div class="preview-form">
                  <div v-for="component in formComponents" :key="component.id" class="preview-form-component">
                    <div class="component-label">{{ component.label || component.name }}</div>
                    <div class="component-preview">
                      <div v-if="component.type === 'input'">
                        <input type="text" :placeholder="component.placeholder || '请输入...'" class="preview-input">
                      </div>
                      <div v-else-if="component.type === 'textarea'">
                        <textarea :placeholder="component.placeholder || '请输入...'" class="preview-textarea"></textarea>
                      </div>
                      <div v-else-if="component.type === 'checkbox'">
                        <div class="checkbox-group">
                          <label v-for="option in component.options" :key="option.value">
                            <input type="checkbox">
                            <span>{{ option.label }}</span>
                          </label>
                        </div>
                      </div>
                      <div v-else-if="component.type === 'radio'">
                        <div class="radio-group">
                          <label v-for="option in component.options" :key="option.value">
                            <input type="radio" name="radio-preview-{{component.id}}">
                            <span>{{ option.label }}</span>
                          </label>
                        </div>
                      </div>
                      <div v-else-if="component.type === 'select'">
                        <select class="preview-select">
                          <option value="">{{ component.placeholder || '请选择...' }}</option>
                          <option v-for="option in component.options" :key="option.value" :value="option.value">{{ option.label }}</option>
                        </select>
                      </div>
                      <div v-else-if="component.type === 'date'">
                        <input type="date" :placeholder="component.placeholder || '选择日期'" :value="component.dateValue" class="preview-date">
                      </div>
                      <div v-else-if="component.type === 'datetime'">
                        <input type="datetime-local" :placeholder="component.placeholder || '选择日期时间'" :value="component.dateTimeValue" class="preview-datetime">
                      </div>
                      <div v-else-if="component.type === 'array'">
                        <div class="array-container">
                          <div class="array-header">
                            <span>{{ component.label || '数据容器' }}</span>
                            <span class="array-count">({{ component.items?.length || 0 }}个子组件)</span>
                          </div>
                          <div class="array-items">
                            <div v-if="component.items && component.items.length > 0">
                              <div v-for="item in component.items" :key="item.id" class="array-item">
                                <div class="array-item-label">子组件: {{ item.label }}</div>
                                <div v-if="item.type === 'input'">
                                  <input type="text" :placeholder="item.placeholder || '请输入...'" class="preview-input">
                                </div>
                                <div v-else-if="item.type === 'textarea'">
                                  <textarea :placeholder="item.placeholder || '请输入...'" class="preview-textarea"></textarea>
                                </div>
                                <div v-else-if="item.type === 'checkbox'">
                                  <div class="checkbox-group">
                                    <label v-for="option in item.options" :key="option.value">
                                      <input type="checkbox">
                                      <span>{{ option.label }}</span>
                                    </label>
                                  </div>
                                </div>
                                <div v-else-if="item.type === 'radio'">
                                  <div class="radio-group">
                                    <label v-for="option in item.options" :key="option.value">
                                      <input type="radio" name="radio-preview-{{item.id}}">
                                      <span>{{ option.label }}</span>
                                    </label>
                                  </div>
                                </div>
                                <div v-else-if="item.type === 'select'">
                                  <select class="preview-select">
                                    <option value="">{{ item.placeholder || '请选择...' }}</option>
                                    <option v-for="option in item.options" :key="option.value" :value="option.value">{{ option.label }}</option>
                                  </select>
                                </div>
                                <div v-else-if="item.type === 'date'">
                                  <input type="date" :placeholder="item.placeholder || '选择日期'" :value="item.dateValue" class="preview-date">
                                </div>
                                <div v-else-if="item.type === 'datetime'">
                                  <input type="datetime-local" :placeholder="item.placeholder || '选择日期时间'" :value="item.dateTimeValue" class="preview-datetime">
                                </div>
                                <div v-else-if="item.type === 'divider'">
                                  <div class="divider"></div>
                                  <div v-if="item.label" class="divider-label">{{ item.label }}</div>
                                </div>
                                <div v-else>
                                  {{ item.name }}
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div v-else-if="component.type === 'divider'">
                        <div class="divider"></div>
                        <div v-if="component.label" class="divider-label">{{ component.label }}</div>
                      </div>
                      <div v-else>
                        {{ component.name }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="modal-footer">
                  <button class="btn btn-primary" @click="handlePreviewSubmit">提交</button>
                  <button class="btn btn-default" @click="closePreview">关闭</button>
                </div>
            </div>
          </div>

          <!-- JSON查看模态框 -->
          <div v-if="showJsonModal" class="modal" @click="closeJsonModal">
            <div class="modal-content json-modal" @click.stop>
              <div class="modal-header">
                <h3>表单JSON</h3>
                <button class="modal-close" @click="closeJsonModal">×</button>
              </div>
              <div class="modal-body">
                <pre class="json-preview">{{ formattedJson }}</pre>
              </div>
              <div class="modal-footer">
                <button class="btn btn-default" @click="copyJson">复制</button>
                <button class="btn btn-primary" @click="closeJsonModal">关闭</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 当前节点信息
const currentNode = ref('task5');

// 组件分类展开状态
const expandedCategories = ref({
  basic: true,
  select: true,
  date: true,
  advanced: true
});

// 组件库定义
const basicComponents = ref([
  { id: 'input', name: '单行文本', type: 'input', icon: '📝' },
  { id: 'textarea', name: '多行文本', type: 'textarea', icon: '📋' },
  { id: 'divider', name: '分割线', type: 'divider', icon: '━' }
]);

const selectComponents = ref([
  { id: 'select', name: '下拉选择', type: 'select', icon: '▼', options: [{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }] },
  { id: 'checkbox', name: '多选框组', type: 'checkbox', icon: '☑️', options: [{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }] },
  { id: 'radio', name: '单选框组', type: 'radio', icon: '🔘', options: [{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }] }
]);

const dateComponents = ref([
  { id: 'date', name: '日期选择', type: 'date', icon: '📅', dateValue: '' },
  { id: 'datetime', name: '日期时间', type: 'datetime', icon: '⏰', dateTimeValue: '' }
]);

const advancedComponents = ref([
  { id: 'array', name: '数据容器', type: 'array', icon: '📦', items: [] }
]);

// 表单组件列表
const formComponents = ref([
  {
    id: 'input_example',
    type: 'input',
    name: 'username',
    label: '用户名',
    placeholder: '请输入用户名',
    required: true,
    width: '100%'
  },
  {
    id: 'select_example',
    type: 'select',
    name: 'gender',
    label: '性别',
    placeholder: '请选择性别',
    options: [
      { label: '男', value: 'male' },
      { label: '女', value: 'female' },
      { label: '其他', value: 'other' }
    ],
    width: '100%'
  },
  {
    id: 'checkbox_example',
    type: 'checkbox',
    name: 'interests',
    label: '兴趣爱好',
    options: [
      { label: '阅读', value: 'reading' },
      { label: '运动', value: 'sports' },
      { label: '音乐', value: 'music' },
      { label: '旅游', value: 'travel' }
    ],
    width: '100%'
  },
  {
    id: 'textarea_example',
    type: 'textarea',
    name: 'description',
    label: '个人简介',
    placeholder: '请输入个人简介',
    width: '100%'
  }
]);

// 当前选中的组件
const selectedComponentId = ref(null);
const selectedComponent = computed(() => {
  return formComponents.value.find(component => component.id === selectedComponentId.value);
});

// 正在编辑的子组件索引
const editingChildIndex = ref(null);

// 拖拽相关
const draggedComponent = ref(null);

// 模态框状态
const showDesignerModal = ref(false);
const showPreview = ref(false);
const showJsonModal = ref(false);

// 格式化的JSON
const formattedJson = computed(() => {
  return JSON.stringify(formComponents.value, null, 2);
});

// 切换组件分类展开状态
function toggleCategory(category) {
  expandedCategories.value[category] = !expandedCategories.value[category];
}

// 选择组件
function selectComponent(id) {
  selectedComponentId.value = id;
}

// 拖拽开始
function onDragStart(component) {
  draggedComponent.value = { ...component };
}

// 拖拽悬停
function onDragOver(e) {
  e.preventDefault();
}

// 拖拽放置
function onDrop(e) {
  e.preventDefault();
  if (draggedComponent.value) {
    // 创建新组件（添加唯一ID）
    const newComponent = {
      ...draggedComponent.value,
      id: `${draggedComponent.value.id}_${Date.now()}`,
      label: draggedComponent.value.name,
      required: false,
      width: '100%'
    };
    
    // 为日期和日期时间组件添加默认配置
    if (newComponent.type === 'date') {
      newComponent.dateValue = '';
    } else if (newComponent.type === 'datetime') {
      newComponent.dateTimeValue = '';
    }
    
    // 对于有选项的组件，深拷贝选项
    if (newComponent.options) {
      newComponent.options = JSON.parse(JSON.stringify(newComponent.options));
    }
    
    // 添加到表单组件列表
    formComponents.value.push(newComponent);
    
    // 选择新添加的组件
    selectComponent(newComponent.id);
  }
}

// 删除组件
function deleteComponent(index) {
  formComponents.value.splice(index, 1);
  selectedComponentId.value = null;
}

// 复制组件
function copyComponent(index) {
  const componentToCopy = formComponents.value[index];
  const copiedComponent = JSON.parse(JSON.stringify(componentToCopy));
  copiedComponent.id = `${copiedComponent.id}_copy_${Date.now()}`;
  formComponents.value.splice(index + 1, 0, copiedComponent);
}

// 添加选项
function addOption() {
  if (selectedComponent.value && selectedComponent.value.options) {
    selectedComponent.value.options.push({
      label: '新选项',
      value: Date.now().toString().slice(-4)
    });
  }
}

// 移除选项
function removeOption(index) {
  if (selectedComponent.value && selectedComponent.value.options) {
    selectedComponent.value.options.splice(index, 1);
  }
}

// 为子组件添加选项
function addChildOption(childIndex) {
  if (selectedComponent.value && selectedComponent.value.items && selectedComponent.value.items[childIndex].options) {
    selectedComponent.value.items[childIndex].options.push({
      label: '新选项',
      value: Date.now().toString().slice(-4)
    });
  }
}

// 移除子组件的选项
function removeChildOption(childIndex, optionIndex) {
  if (selectedComponent.value && selectedComponent.value.items && selectedComponent.value.items[childIndex].options) {
    selectedComponent.value.items[childIndex].options.splice(optionIndex, 1);
  }
}

// 添加数组子组件
function addArrayChild() {
  if (selectedComponent.value && selectedComponent.value.type === 'array') {
    // 创建一个默认的单行文本子组件
    const defaultChild = {
      id: `child_${Date.now()}`,
      type: 'input',
      name: `field_${Date.now().toString().slice(-4)}`,
      label: '子组件',
      placeholder: '请输入...',
      required: false,
      width: '100%'
    };
    
    // 初始化items数组（如果不存在）
    if (!selectedComponent.value.items) {
      selectedComponent.value.items = [];
    }
    
    // 添加子组件
    selectedComponent.value.items.push(defaultChild);
  }
}

// 数据容器拖拽悬停
function onArrayDragOver(e, arrayId) {
  e.preventDefault();
  const arrayContainer = e.currentTarget;
  arrayContainer.classList.add('drag-over');
}

// 编辑数组子组件
function editArrayChild(index) {
  editingChildIndex.value = index;
}

// 数据容器拖拽放置
function onArrayDrop(e, arrayId) {
  e.preventDefault();
  e.stopPropagation(); // 阻止事件冒泡，防止触发设计区域的onDrop
  
  // 移除拖拽样式
  const arrayContainer = e.currentTarget;
  arrayContainer.classList.remove('drag-over');
  
  if (draggedComponent.value && draggedComponent.value.type !== 'array') {
    // 找到数据容器组件
    const arrayComponent = formComponents.value.find(component => component.id === arrayId);
    
    if (arrayComponent) {
      // 初始化items数组（如果不存在）
      if (!arrayComponent.items) {
        arrayComponent.items = [];
      }
      
      // 创建子组件
      const childComponent = {
        ...draggedComponent.value,
        id: `${draggedComponent.value.id}_child_${Date.now()}`,
        label: draggedComponent.value.name,
        required: false,
        width: '100%'
      };
      
      // 为日期和日期时间组件添加默认配置
      if (childComponent.type === 'date') {
        childComponent.dateValue = '';
      } else if (childComponent.type === 'datetime') {
        childComponent.dateTimeValue = '';
      }
      
      // 对于有选项的组件，深拷贝选项
      if (childComponent.options) {
        childComponent.options = JSON.parse(JSON.stringify(childComponent.options));
      }
      
      // 添加到数据容器的items中
      arrayComponent.items.push(childComponent);
      
      // 选择数据容器组件
      selectComponent(arrayId);
    }
  }
}

// 删除数组子组件
function removeArrayChild(index) {
  if (selectedComponent.value && selectedComponent.value.items) {
    selectedComponent.value.items.splice(index, 1);
  }
}

// 预览表单
function previewForm() {
  showPreview.value = true;
}

// 关闭预览
function closePreview() {
  showPreview.value = false;
}

// 处理预览表单提交
function handlePreviewSubmit() {
  // 创建一个对象来存储表单数据
  const formData = {};
  
  // 遍历所有组件，获取值
  formComponents.value.forEach(component => {
    // 在实际应用中，这里应该根据组件类型获取不同的值
    // 由于我们无法直接访问DOM元素，这里模拟获取值
    if (component.type === 'input' || component.type === 'textarea') {
      formData[component.name] = '示例值'; // 实际应用中应获取真实输入值
    } else if (component.type === 'date') {
      // 模拟日期选择，使用当前日期
      const today = new Date();
      const formattedDate = today.toISOString().split('T')[0]; // YYYY-MM-DD格式
      formData[component.name] = formattedDate;
    } else if (component.type === 'datetime') {
      // 模拟日期时间选择，使用当前日期时间
      const now = new Date();
      // 格式化日期时间为YYYY-MM-DDTHH:MM格式
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      const formattedDateTime = `${year}-${month}-${day}T${hours}:${minutes}`;
      formData[component.name] = formattedDateTime;
    } else if (component.type === 'select') {
      formData[component.name] = component.options[0]?.value || ''; // 默认选择第一个选项
    } else if (component.type === 'radio') {
      formData[component.name] = component.options[0]?.value || ''; // 默认选择第一个选项
    } else if (component.type === 'checkbox') {
      // 对于复选框，存储选中的选项值数组
      formData[component.name] = component.options.slice(0, 2).map(option => option.value); // 默认选中前两个选项
    } else if (component.type === 'array' && component.items) {
      formData[component.name] = component.items.map(item => ({
        [item.name]: '示例子组件值'
      }));
    }
  });
  
  // 显示提交的数据
  console.log('表单提交数据:', formData);
  alert('表单提交成功！\n\n提交数据:\n' + JSON.stringify(formData, null, 2));
}

// 显示JSON
function showJson() {
  showJsonModal.value = true;
}

// 关闭JSON
function closeJsonModal() {
  showJsonModal.value = false;
}

// 复制JSON
function copyJson() {
  navigator.clipboard.writeText(formattedJson.value).then(() => {
    alert('JSON已复制到剪贴板');
  }).catch(err => {
    console.error('无法复制JSON:', err);
  });
}

// 上移组件
function moveComponentUp(index) {
  if (index > 0) {
    // 交换位置
    const temp = formComponents.value[index];
    formComponents.value[index] = formComponents.value[index - 1];
    formComponents.value[index - 1] = temp;
    // 重新选择移动后的组件
    selectComponent(temp.id);
  }
}

// 下移组件
function moveComponentDown(index) {
  if (index < formComponents.value.length - 1) {
    // 交换位置
    const temp = formComponents.value[index];
    formComponents.value[index] = formComponents.value[index + 1];
    formComponents.value[index + 1] = temp;
    // 重新选择移动后的组件
    selectComponent(temp.id);
  }
}

// 保存表单
function saveForm() {
  // 在实际应用中，这里应该调用API保存表单配置
  console.log('保存表单:', formComponents.value);
  alert('表单已保存');
}
</script>

<style scoped>
/* 表单设计器容器 */
.form-designer-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: transparent;
}

/* 按钮容器 */
.designer-button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: var(--bg-light);
}

/* 设计器按钮 */
.designer-toggle-btn {
  font-size: var(--font-size-lg);
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: var(--border-radius-md);
  background-color: var(--primary-color);
  color: white;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  box-shadow: var(--shadow-md);
}

.designer-toggle-btn:hover {
  background-color: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* 设计器模态框 */
.designer-modal {
  width: 95%;
  max-width: 1400px;
  max-height: 95vh;
  display: flex;
  flex-direction: column;
}

.designer-modal .modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

/* 顶部操作栏 */
.designer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  background-color: var(--bg-white);
  border-bottom: 1px solid var(--border-base);
  box-shadow: var(--shadow-sm);
}

.title-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.page-title {
  font-size: var(--font-size-xl);
  color: var(--text-primary);
  margin: 0;
}

.breadcrumb {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.action-buttons {
  display: flex;
  gap: var(--spacing-md);
}

/* 主要内容区域 */
.designer-content {
  display: flex;
  flex: 1;
  overflow: hidden;
  padding: var(--spacing-lg);
  gap: var(--spacing-lg);
}

/* 组件库面板 */
.components-panel {
  width: 240px;
  background-color: var(--bg-white);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-base);
  padding: var(--spacing-lg);
  overflow-y: auto;
}

.panel-title {
  font-size: var(--font-size-md);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
}

.component-category {
  margin-bottom: var(--spacing-md);
}

.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  background-color: var(--bg-light);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.category-header:hover {
  background-color: var(--bg-hover);
}

.category-name {
  font-weight: 500;
  color: var(--text-regular);
}

.icon.rotate {
  transform: rotate(180deg);
}

.category-content {
  padding: var(--spacing-sm);
}

.component-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  cursor: grab;
  transition: background-color 0.2s ease;
  margin-bottom: var(--spacing-xs);
}

.component-item:hover {
  background-color: var(--bg-light);
}

.component-item:active {
  cursor: grabbing;
}

.component-icon {
  font-size: var(--font-size-md);
}

.component-name {
  color: var(--text-regular);
  font-size: var(--font-size-sm);
}

/* 设计区域 */
.design-area {
  flex: 1;
  background-color: var(--bg-white);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-base);
  padding: var(--spacing-xl);
  overflow-y: auto;
  min-height: 0;
}

.form-container {
  min-height: 400px;
  border: 2px dashed var(--border-light);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-lg);
  transition: all 0.3s ease;
}

.form-container.empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-form {
  text-align: center;
  color: var(--text-secondary);
}

.empty-icon {
  font-size: 48px;
  margin-bottom: var(--spacing-md);
  opacity: 0.5;
}

.empty-text {
  font-size: var(--font-size-base);
  max-width: 300px;
}

/* 表单组件样式 */
.form-component {
  position: relative;
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-lg);
  border: 2px solid transparent;
  border-radius: var(--border-radius-md);
  transition: all 0.3s ease;
  cursor: pointer;
}

.form-component:hover {
  background-color: var(--bg-light);
}

.form-component.selected {
  background-color: var(--bg-hover);
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.component-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.component-label {
  font-weight: 500;
  color: var(--text-primary);
}

.component-preview {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* 预览组件样式 */
.preview-input,
.preview-textarea,
.preview-select,
.preview-date,
.preview-datetime {
  width: 100%;
  padding: var(--spacing-sm);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-base);
  background-color: white;
  color: var(--text-secondary);
  font-size: var(--font-size-base);
}

.preview-textarea {
  min-height: 80px;
  resize: vertical;
}

.checkbox-group,
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.checkbox-group label,
.radio-group label {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  cursor: pointer;
}

/* 数组容器样式 */
.array-container {
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-base);
  overflow: hidden;
  transition: all 0.3s ease;
}

/* 拖拽悬停样式 */
  .array-container.drag-over {
    border-color: var(--primary-color);
    background-color: rgba(99, 102, 241, 0.05);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
  }
  
  /* 子组件配置样式 */
  .array-child-item {
    margin-bottom: 10px;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: var(--border-radius-base);
  }
  
  .array-child-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  
  .edit-child-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    margin-right: 8px;
    font-size: 14px;
    opacity: 0.7;
    transition: opacity 0.2s;
  }
  
  .edit-child-btn:hover {
    opacity: 1;
  }
  
  .remove-child-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    color: #ff4d4f;
    font-size: 18px;
    line-height: 1;
  }
  
  .add-child-btn {
    width: 100%;
    padding: 8px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--border-radius-base);
    cursor: pointer;
    margin-top: 10px;
  }
  
  .add-child-btn:hover {
    background-color: var(--primary-color-dark);
  }
  
  .array-child-properties {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
  }
  
  .small-input {
    width: 100%;
    margin-bottom: 8px;
  }
  
  .save-child-btn {
    padding: 6px 12px;
    background-color: #52c41a;
    color: white;
    border: none;
    border-radius: var(--border-radius-base);
    cursor: pointer;
    margin-top: 8px;
  }
  
  .save-child-btn:hover {
    background-color: #73d13d;
  }
  
  .array-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm);
    background-color: var(--bg-light);
    border-bottom: 1px solid var(--border-light);
  }

.array-count {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.array-items {
  padding: var(--spacing-sm);
}

.array-item {
  padding: var(--spacing-sm);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-sm);
  margin-bottom: var(--spacing-sm);
}

.array-item:last-child {
  margin-bottom: 0;
}

.array-item-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.empty-array {
  text-align: center;
  color: var(--text-placeholder);
  font-style: italic;
  padding: var(--spacing-md);
}

/* 分割线样式 */
.divider {
  height: 1px;
  background-color: var(--border-light);
  margin: var(--spacing-md) 0;
}

.divider-label {
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

/* 组件操作按钮 */
.component-actions {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  display: flex;
  gap: var(--spacing-xs);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.form-component:hover .component-actions,
.form-component.selected .component-actions {
  opacity: 1;
}

.action-btn {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: var(--border-radius-sm);
  background-color: var(--bg-white);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
}

.action-btn:hover {
  background-color: var(--primary-color);
  color: white;
}

.action-btn:disabled {
  background-color: var(--bg-light);
  color: var(--text-disabled);
  cursor: not-allowed;
}

.action-btn:disabled:hover {
  background-color: var(--bg-light);
  color: var(--text-disabled);
}

/* 属性配置面板 */
.properties-panel {
  width: 300px;
  background-color: var(--bg-white);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-base);
  padding: var(--spacing-lg);
  overflow-y: auto;
}

.no-selection {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-secondary);
  text-align: center;
}

.property-section {
  margin-bottom: var(--spacing-lg);
}

.section-title {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.property-item {
  margin-bottom: var(--spacing-md);
}

.property-label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--text-regular);
  font-weight: 500;
}

.property-input {
  width: 100%;
  padding: var(--spacing-sm);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-base);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  transition: all 0.3s ease;
}

.property-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.checkbox-item {
  display: flex;
  align-items: center;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  cursor: pointer;
  font-size: var(--font-size-base);
  color: var(--text-regular);
}

/* 选项配置 */
.option-item {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.option-input {
  flex: 1;
  padding: var(--spacing-xs);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
}

.option-input.small-input {
  flex: 1;
  width: auto;
}

.add-option-btn.small-btn {
  padding: 6px 12px;
  font-size: var(--font-size-sm);
  margin-top: 5px;
}

.remove-option-btn,
.remove-child-btn {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: var(--border-radius-sm);
  background-color: var(--danger-color);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
  line-height: 1;
}

.add-option-btn,
.add-child-btn {
  width: 100%;
  padding: var(--spacing-sm);
  border: 1px dashed var(--border-light);
  border-radius: var(--border-radius-base);
  background-color: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: var(--font-size-sm);
}

.add-option-btn:hover,
.add-child-btn:hover {
  background-color: var(--bg-light);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

/* 数组子组件配置 */
.array-children {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.array-child-item {
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-base);
  overflow: hidden;
}

.array-child-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm);
  background-color: var(--bg-light);
}

/* 模态框样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(2px);
  animation: fadeIn 0.3s ease;
}

.modal-content {
  background-color: var(--bg-white);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-lg);
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease;
}

.json-modal {
  max-width: 800px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border-light);
}

.modal-header h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-lg);
}

.modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background-color: transparent;
  color: var(--text-secondary);
  font-size: var(--font-size-xl);
  cursor: pointer;
  border-radius: var(--border-radius-base);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  background-color: var(--bg-light);
  color: var(--text-primary);
}

.modal-body {
  padding: var(--spacing-lg);
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  padding: var(--spacing-lg);
  border-top: 1px solid var(--border-light);
  gap: var(--spacing-md);
}

/* 预览表单样式 */
.preview-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.preview-form-component {
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-lg);
  background-color: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-md);
  transition: all 0.3s ease;
}

.preview-form-component:hover {
  box-shadow: var(--shadow-sm);
}

/* 为预览表单中的输入框等添加交互效果 */
.preview-form .preview-input,
.preview-form .preview-textarea,
.preview-form .preview-select,
.preview-form .preview-date,
.preview-form .preview-datetime {
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  transition: all 0.3s ease;
  cursor: text;
}

.preview-form .preview-input:focus,
.preview-form .preview-textarea:focus,
.preview-form .preview-select:focus,
.preview-form .preview-date:focus,
.preview-form .preview-datetime:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* JSON预览样式 */
.json-preview {
  background-color: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-base);
  padding: var(--spacing-lg);
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--text-primary);
}

/* 动画效果 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .designer-content {
    flex-direction: column;
  }
  
  .components-panel,
  .properties-panel {
    width: 100%;
    max-height: 300px;
  }
  
  .design-area {
    order: -1;
  }
}
</style>